<template>
	<view :class="{'border-bottom':props.border}" class="zh-cell-item display-flex justify-between align-center" @click="handleClick">
		<text class="font-bold font-28">{{ title }}</text>
		<view class="display-flex align-center">
			<text class="font-999 font-28">{{ value }}</text>
			<view class="right-slot">
				<slot name="right"></slot>
			</view>
			<image v-show="props.arrow" src="@/static/icons/right_arrow.png" class="right-arrow-icon"/>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = withDefaults(defineProps<{
		title?: string
		value?: string
		arrow?: boolean
		border?: boolean
	}>(), {
		arrow: true,
		border:true
	})
	
	const emit = defineEmits(['click'])
	
	const handleClick = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
.zh-cell-item {
	padding: 30rpx 0;
	&.border-bottom {
		border-bottom:1rpx solid $uni-border-color;
	}
	.right-slot {
		margin-left: 20rpx;
	}
	.right-arrow-icon {
		width: 13rpx;
		height: 25rpx;
		margin-left: 20rpx;
	}
}
</style>
